```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>屎牌大乱斗</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Helvetica,Arial,sans-serif}
body{background:#222;color:#fff;height:100vh;display:flex;flex-direction:column}
header{background:#000;padding:6px;text-align:center;font-size:18px;font-weight:700}
#room{padding:10px;flex:1;overflow-y:auto}
.card{background:#444;border-radius:8px;margin:4px 0;padding:6px 10px;font-size:15px;position:relative}
.card.brown{background:#6f4e37}
.card.green{background:#006400}
.card.red{background:#8b0000}
#hand{display:flex;flex-wrap:wrap;padding:4px;justify-content:center;background:#111}
#hand .card{width:70px;height:100px;margin:2px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent}
#hand .card.selected{border:2px solid gold}
.btn{background:#007aff;color:#fff;border:none;padding:8px 12px;border-radius:6px;margin:4px;font-size:14px}
.btn:disabled{opacity:.4}
#log{height:120px;background:#000;overflow-y:auto;padding:4px;font-size:12px;color:#aaa}
</style>
</head>
<body>
<header>屎牌大乱斗</header>

<div id="room">
  <div id="players"></div>
  <button id="startBtn" class="btn">开始游戏</button>
</div>

<div id="hand"></div>

<div id="log"></div>

<script>
/* ---------- 牌库 ---------- */
const cardNames = [
  ...Array(45).fill('大便牌'),
  ...Array(30).fill('口罩牌'),
  ...Array(5).fill('兔子牌'),
  ...Array(3).fill('炸弹牌'),
  ...Array(4).fill('光墙牌'),
  ...Array(2).fill('丢屎牌'),
  ...Array(1).fill('喂屎牌'),
  '移形换影',
  ...Array(10).fill('邪恶爪子'),
  ...Array(4).fill('大宝剑'),
  '牛大','牛二','拉屎',
  ...Array(2).fill('恶霸强哥'),
  '反弹弹','复制法术','偷窥','大便超人','大毛','二毛','三毛','剁手','剁脚',
  ...Array(10).fill('色鬼'),
  ...Array(10).fill('猪头'),
  '大便收藏家','吃屎专家','绿帽子','老八','撕烂你把憋嘴','蛊惑法术','猪霸天','王顺','板牙姐妹花'
];

/* ---------- 工具 ---------- */
const shuffle = arr => arr.sort(()=>Math.random()-0.5);
const log = msg => {
  const l = document.getElementById('log');
  l.innerHTML += `<div>${msg}</div>`;
  l.scrollTop = l.scrollHeight;
};

/* ---------- 游戏状态 ---------- */
let deck, players, current, direction;

class Player {
  constructor(id){
    this.id = id;
    this.hand = [];
    this.poop = 0;
  }
  draw(n=1){
    while(n-- && deck.length) this.hand.push(deck.pop());
  }
}

function initGame(pNum=4){
  deck = shuffle([...cardNames]);
  players = Array.from({length:pNum},(_,i)=>new Player(i));
  current = 0;
  direction = 1;
  players.forEach(p=>p.draw(5));
  render();
  log(`游戏开始，共 ${pNum} 人`);
}

/* ---------- 渲染 ---------- */
function render(){
  const box = document.getElementById('players');
  box.innerHTML = players.map((p,i)=>`
    <div class="card ${i===current?'red':''}">
      玩家${i+1} 手牌:${p.hand.length} 屎量:${p.poop}
    </div>`).join('');
  
  const handBox = document.getElementById('hand');
  const me = players[current];
  handBox.innerHTML = me.hand.map((c,idx)=>`
    <div class="card brown" data-idx="${idx}">${c}</div>`).join('');
  handBox.onclick = e=>{
    const idx = e.target.dataset.idx;
    if(idx===undefined) return;
    playCard(+idx);
  };
}

/* ---------- 回合逻辑 ---------- */
function nextTurn(){
  current = (current + direction + players.length)%players.length;
  players[current].draw(1);
  render();
}

function playCard(idx){
  const me = players[current];
  const card = me.hand.splice(idx,1)[0];
  log(`玩家${current+1} 打出 ${card}`);

  /* 简易逻辑：仅示例炸弹 & 大便 */
  switch(card){
    case '炸弹牌':
      const target = (current+1)%players.length;
      log(`玩家${target+1} 被炸，弃掉全部手牌`);
      players[target].hand = [];
      break;
    case '大便牌':
      if(!me.hand.includes('口罩牌')){
        me.poop++;
        log(`玩家${current+1} 没口罩，吃屎+1`);
      } else {
        log(`玩家${current+1} 用口罩抵消`);
      }
      break;
    default:
      log(`尚未实现 ${card} 效果`);
  }
  nextTurn();

  /* 胜负 */
  if(deck.length===0){
    const loser = players.reduce((a,b)=>b.poop>a.poop?b:a);
    alert(`游戏结束！玩家${loser.id+1} 屎最多，输了！`);
  }
}

/* ---------- 启动按钮 ---------- */
document.getElementById('startBtn').onclick = ()=>{
  const n = prompt('输入人数(3-6)',4);
  if(n>=3 && n<=6) initGame(n);
  document.getElementById('startBtn').style.display='none';
};
</script>
</body>
</html>
```

---
